<template>
  <basic-layout
    :haveSider="true"
    :isStandLayout="true"
    :isStandTable="true"
  >
    <template #searchBox>
      <!-- 头部搜索框区域 -->
      <basic-form
        ref="form"
        mode='search'
        style="min-height:40px"
        :isBtn="false"
        :isInline="true"
        :formInfos="q_formInfos"
        :formDatas="q_formDatas"
        @onFind="onFind"
        ></basic-form>
    </template>
    <template #sider>
      <!-- 内容区域侧边栏 -->
      内容区域侧边栏
    </template>
    <template #batchOperat>
      <!-- 表格操作按钮区域 可以自定义也可以使用batch-operat-btn组件-->
      <a-button type="primary" size="small">表格操作1</a-button>
      <a-button type="primary" size="small" style="marginLeft:15px">表格操作2</a-button>
    </template>
    <template #tableList>
      <!-- 表格区域 -->
      <a-list-table
        :columns="columns"
        :tableData="listdata"
        :pagination="pagination"
        @onTableChange="handleTableChange"
        :loading="loading"
      ></a-list-table>
    </template>
  </basic-layout>
</template>

<script>
import basicLayout from '@/views/app/common/basicLayout.vue'
import basicForm from '@/views/app/common/basicForm.vue'
import aListTable from '@/views/app/common/aListTable.vue'

import {q_formInfos,q_formDatas,columns} from './dataConfig'
import {getByConditions,getByConditionsCount} from './api'
export default {
    components:{
        basicLayout,
        basicForm,
        aListTable
    },
    data(){
        return{
          q_formInfos:q_formInfos,
          q_formDatas:q_formDatas,
          columns:columns,
          listdata:[],
          loading: false,
          pagination: {
            //分页配置
            current: 1, //当前页码 current
            pageSize: 10, //每页显示条数 pageSize
            total: 1,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ['2', '10', '50', '100']
          },
        }
    },
    created(){
      this.getTotal()
      this.getList()
    },
    methods:{
      formatParms(){
        let sbdata=JSON.parse(JSON.stringify(this.q_formDatas))
        for (let key in sbdata) {
          if (!sbdata[key]){
            sbdata[key]=null  
          }
          //配置模糊查询字段
          if (key=='模糊查询字段1' || key=='模糊查询字段2') {
            if (sbdata[key]==null) {
              sbdata[key]=`%%`
            }else{
              sbdata[key]=`%${sbdata[key]}%`
            }
            
          }
        }
        return sbdata
      },
      // 初始化页面时得到总数
      async getTotal() {
        let pages = ''
        pages = await getByConditionsCount(this.formatParms())
        console.log(pages)
        if (pages && pages.code && pages.code === 'C1') {
          const pagination = { ...this.pagination }
          pagination.total = pages.data
          this.pagination = pagination
          this.pagination.showTotal =  (showTotal) => {return `共 ${showTotal} 条`}
        }
      },
      // 初始化查询时的数据列表
      async getList() {
        console.log('请求列表时传入的数据', this.formatParms())
        let actionBtn=['编辑']
        this.loading = true
        let listdata = []
        let res = ''
        res = await getByConditions(this.formatParms(), this.pagination)
        this.loading = false
        console.log(res)
        if (res && res.code && res.code === 'C1' && res.data) {
          const resdata = res.data
          for (let item of resdata) {
              listdata.push({
                key: item.pid,
                standardCode:item.code,
                action:actionBtn,
                ...item
                }
              )
          }
          this.listdata =listdata
        } else {
          this.listdata = []
        }
      },
      // 触发改变页码,筛选,排序时的回调
      handleTableChange(pagination, filters, sorter) {
        this.pagination.current = pagination.current
        this.pagination.pageSize = pagination.pageSize
        this.getList()
      },
      // 查询按钮
      onFind(val) {
        console.log(this.q_formDatas);
        this.q_formDatas={...this.q_formDatas,...val}
        this.pagination.current = 1
        this.getTotal()
        this.getList()
      },
    }
}
</script>

<style>
</style>